<template>
<div>
<Header></Header>
    <div class="list_banner" style="background-image: url(lib/images/list_banner_2.jpg);"></div>
    <div class="travel_con index_box_1">
        <p class="sm_wz">说走就走的旅行，其实并不靠谱；只有精心设计有计划的旅行，才能玩出彩；<br />我们为您提供私密小团队旅行，与众不同的高端定制旅行线路，带给您最贴近当地风俗与文化的旅行体验。</p>
        <ul class="travel_ul common_code_pop">
            <li v-for="travel in list">
                <a href="javascript:void(0);">
                    <div class="pt">
                        <div class="wx_con">
                            <p class="code_pt" :link="weixinPrefix+'#/travel/detail/'+travel.id"></p>
                            <p class="wx_wz">微信扫码在线下单</p>
                        </div>
                        <img width="296" height="154" :src="sftpPathPrefix + getZhutu(travel.zhutu)" alt="">
                    </div>
                    <p class="name">{{travel.title}}</p>
                    <p class="wz">{{travel.subtitle}}</p>
                    <p class="price"><span class="num">{{travel.zuidirenjunJiner}}</span>元起</p>
                </a>
            </li>
        </ul>
        <Pagination :total="count" :pageSize="9" @change="findPage"></Pagination>
    </div>
    <Footer></Footer>
</div>
</template>
<script>
import common from "../utils/common";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import Pagination from "../components/Pagination.vue";
export default {
  components: {
    Header,Footer,Pagination
  },
  mounted: function() {
    this.findPage(1);
  },
  methods: {
    findPage:function(pageNo,qr){
    	var self = this;
        var url = common.getApiPrefix() + "api/portal/web/travel/list/"+pageNo+"/9";
        common.doGet(url,function(data){
            self.list = data.resultList;
            self.count = data.count;
            setTimeout(function(){
			    $(".common_code_pop>li").hover(function(){
			        $(this).find(".wx_con").animate({top:"0px"},300);
			    },function(){
			        $(this).find(".wx_con").animate({top:-$(this).find(".pt").height()+"px"},300);
			    });
			    qrcode(".common_code_pop .code_pt");
		    },100);
        });
    },
	getZhutu: function (picArr) {
    	picArr = picArr.replace('[', '').replace(']', '');
    	return picArr.split(",")[0].replace(/^\"|\"$/g,'');
	}
  },
  data: function() {
    return {
        sftpPathPrefix: common.getFtpPrefix(),
        weixinPrefix: common.getWeixinPrefix(),
        list: [],
        count:0
    };
  }
};
</script>